<template>
  <div>
    <el-container>
      <el-header>
        <div class="header">
          <el-menu :default-active="$route.path"
                   router mode="horizontal"
                   class="el-menu-demo"
                   active-text-color="#ffd04b"
                   style="background: lavenderblush">
            <el-menu-item index="/pcenter" > <img src="http://qom05wwz5.hd-bkt.clouddn.com/db6674a693c3fd657dfe1b244fb9ee07.png"/></el-menu-item>
            <el-menu-item index="/pcenter" >首页</el-menu-item>
            <el-menu-item v-show="this.name" index="/porder" >我的订单</el-menu-item>
            <el-menu-item v-show="!(this.name)" @click="dialogVisible = true" style="float: right">登录</el-menu-item>
            <el-menu-item v-show="!(this.name)" index="/register" style="float: right">注册</el-menu-item>
            <el-menu-item v-show="this.name" index="/pcenter" style="float: right">{{name}}</el-menu-item>
            <el-menu-item v-show="this.name" @click="dialogVisible = true" style="float: right">切换账号</el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <el-container>
        <el-main>
          <router-view>
          </router-view>
        </el-main>
      </el-container>
      <el-footer>
        <div class="gcs-footer">
          <div class="footer-top">
            <a href="#">百度网</a> |
            <a href="#">新浪网</a> |
            <a href="#">腾迅房产</a> |
            <a href="#">找货网</a> |
            <a href="#">北极绒</a> |
            <a href="#">阿里巴巴</a> |
          </div>
          <p>
            ©Copyright 2018 海盗侠科技公司版权所有 | 上海ICP备12438170号-4
          </p>
        </div>
      </el-footer>
    </el-container>
    <el-dialog
      :visible.sync="dialogVisible"
      width="20%">
      <span>
        <div>
          <el-button type="danger" round @click="tologin">用户登录</el-button>
        </div>
         <div style="margin-top: 20px">
           <el-button type="danger" round @click="toplaylogin">陪玩登录</el-button>
         </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: "index",
    data() {
      return {
        dialogVisible: false,
        name:'',
        currentDate: new Date(),
        gList:[],
        guanggao:[
          { id:1,
            pic:'http://qmz4qvq2n.hd-bkt.clouddn.com/1975371555069636.jpg'
          },
          {
            id:2,
            pic:'http://qmz4qvq2n.hd-bkt.clouddn.com/1727151609406817.jpg'
          },{
            id:3,
            pic:'http://qmz4qvq2n.hd-bkt.clouddn.com/db376e3e20abcddd57ec688be6bcc38a.jpg'
          }
        ]
      }
    },
    created() {
      var user=sessionStorage.getItem("user");
      this.name=user;
    }
    ,
    methods:{
      findGame:function () {
        axios.post("api/play/findGame").then(res=>{
          this.gList=res.data.data;
          if (res.data.code==200){
            console.log(res.data.data)
            this.gList=res.data.data;
          }
        })
      },
      tologin:function(){
        this.$router.push({path:'/login'})
      },
      toplaylogin:function(){
        this.$router.push({path:'/playlogin'})
      },
      goByGame:function (gname) {
        alert(gname);
        this.$router.push(
          {
            path:'/byGame',
            query:{
              gname:gname
            }
          }
        )
      }
    },
    mounted(){
      this.findGame();
    }
  }
</script>
<style>
  .gcs-footer{
    margin-top: 0px;
    width: 100%;
    height: 165px;
    text-align: center;
    color: #888888;
    position: absolute;
  }
  .gcs-footer .footer-top{
    line-height: 20px;
    height: 20px;
    margin-top: 5px;
  }
  .gcs-footer a{
    color: #888888;
    text-decoration: none;
    padding: 0 10px;
    vertical-align:middle;
  }

  .gcs-footer a:hover{
    color: red;
    text-decoration: underline;
  }

  .gcs-footer p{
    height: 15px;
    color: #888888;
    margin-top: 10px;
  }
  .game{
    height: 70px;
    margin-top: 10px;
    line-height: 60px;
    align-items: center;

  }
  .game2{
    height: 600px;
    line-height: 60px;
    align-items: center;
  }
  .el-header, .el-footer {
    background-color:lavenderblush;
    color: slateblue;
    align-items: center;
    text-align: left;
    line-height: 10px;
    font-family: 微软雅黑;
    font-weight: bold;
  }

  .el-aside {
    background-color: thistle;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: lavender;
    height: 760px;
    color: #333;
    text-align: center;
    line-height: 160px;
    font-family:微软雅黑
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
